<template>
	<view class="musiclist">
		<view class="play_all">
			<view class="text">
				<i class="iconfont" style="color:#ed2615">&#xe633;</i>
				<view style="margin-left: 10upx;">播放全部</view>
			</view>
			<view class="right">
				<i class="iconfont">&#xe607;</i>
				<i class="iconfont" style="margin-left: 16upx;">&#xe65f;</i>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in 60">
				<view class="order">
					{{index+1}}
				</view>
				<view class="left">
					<view class="presented">
						<view class="title">
							晚安喵
						</view>
						<view class="singer">
							<i class="icon sq">SQ</i><i class="icon try">试听</i><i
								class="icon vip">vip</i><text>邓丽欣</text>
						</view>
					</view>
					<view class="play">
						<i class="iconfont">&#xf2b1;</i>
						<i class="iconfont" style="margin-left: 16upx;">&#xe67a;</i>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="circle">
				<view class="img">
				</view>
			</view>
			<view class="title">
				<view class="text">
					晚安喵
				</view>
				<view class="right">
					<i class="iconfont">&#xf2b1;</i>
					<i class="iconfont" style="margin-left: 16upx;">&#xe67a;</i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="less" scoped>
	.musiclist {
		padding-bottom: 160upx;

		.play_all {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 20upx;

			.right,
			.text {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.item {
			display: flex;
			font-size: 28upx;
			padding: 20upx 20upx;
			padding-left: 0;
			box-sizing: border-box;

			.order {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100upx;
				font-size: 32upx;
			}

			.left {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.presented {
					.icon {
						display: flex;
						justify-content: center;
						align-items: center;
						font-style: normal;
						font-size: 16upx;
						padding: 0 3upx;
						border: 2upx solid #cd2e3e;
						border-radius: 6upx;
						margin-right: 6upx;
					}

					.vip {
						border-color: #cd2e3e;
						color: #cd2e3e;
					}

					.try {
						border-color: #4e9bff;
						color: #4e9bff;
					}

					.sq {
						border-color: #cd2e3e;
						color: #cd2e3e;
					}

					.singer {
						display: flex;
						justify-content: center;
						align-items: center;
					}

				}

				.play {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		/deep/.iconfont {
			font-size: 40upx;
		}

		.bottom {
			position: fixed;
			display: flex;
			align-items: center;
			left: 0;
			right: 0;
			bottom: 0;
			height: 120upx;
			background-color: #FFF;
			border-top: 2upx solid #bfbfbf;

			.circle {
				position: absolute;
				bottom: 30upx;
				left: 30upx;
				width: 140upx;
				height: 140upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFF;
				background-repeat: no-repeat;
				background-position: -103upx -414upx;
				background-image: url("http://qiniu.marcopolo01.top/coverall.png");
				background-size: 270upx;
				border-radius: 50%;

				.img {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100upx;
					height: 100upx;
					background-position: center center;
					background-repeat: no-repeat;
					background-image: url("http://qiniu.marcopolo01.top/header.jpg");
					background-size: 100%;
					border-radius: 50%;
					background-color: #383838;
				}
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding-left: 180upx;

				.right {
					display: flex;
				}
			}
		}
	}

	.circle .img {
		animation: myMove1 8s infinite;
		// -webkit-animation: myMove1 5s ease-in infinite alternate;
	}


	@keyframes myMove1 {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes myMove1 {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
